<template>
  <div class="tjpptk_box">
    <div class="tjpptk">
      <div class="head_clos">
        <h2 v-if="$store.state.xiugaiflag==''">添加品牌</h2>
        <h2 v-if="$store.state.xiugaiflag!=''">修改品牌</h2>
        <span>
          <a-icon class="close" @click="close" type="close" />
        </span>
      </div>
      <div class="tjpptk_inp">
        <ul>
          <li>
            <span class="inp_tit">
              <span class="bxred">*</span> 品牌名称：
            </span>
            <a-auto-complete
              class="li"
              :dataSource="pplist"
              style="width: 500px"
              placeholder="请输入品牌名称"
              :filterOption="flfilterOption"
              @change="tjppchange"
              :defaultValue="tjfpfl"
              v-model="pp"
            />
          </li>
          <li>
            <span class="inp_tit">图片上传：</span>
            <div class="clearfix">
              <a-upload
                action="https://www.bearing.cn"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                @change="handleChange"
                accept=".jpg, .png"
                :remove="removelist"
              >
                <div v-if="fileList.length < 3">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </li>
          <li>
            <span class="inp_tit">类型：</span>
            <a-radio-group @change="flChange" v-model="protype">
              <a-radio :value="'进口品牌'">进口品牌</a-radio>
              <a-radio :value="'国内品牌'">国内品牌</a-radio>
            </a-radio-group>
          </li>
          <li>
            <span class="inp_tit">介绍：</span>
            <a-textarea
              v-model="tjppjs"
              style="width:500px; vertical-align: top;"
              name
              id
              cols="30"
              rows="4"
            ></a-textarea>
          </li>
          <li>
            <span class="inp_tit">备注：</span>
            <a-textarea
              v-model="remark"
              style="width:500px; vertical-align: top;"
              name
              id
              cols="30"
              rows="4"
            ></a-textarea>
          </li>
          <li class="foot_btn">
            <a-button type="primary" @click="subtjpp">保存</a-button>
            <a-button @click="close">取消</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  inject: ["reload"],
  data() {
    return {
      //图标----开始
      previewVisible: false,
      previewImage: "",
      //图标----结束
      protype: this.$store.state.xiugaiflag != "" ? this.$parent.protype : "", //类型
      previewVisible: false,
      previewImage: "",
      fileList: [],
      fldatalist: [],
      tjfpfl: this.$store.state.xiugaiflag != "" ? this.$parent.flmcvalue : "",
      tjppjs: this.$store.state.xiugaiflag != "" ? this.$parent.fljsvalue : "",
      tjpppic: [],
      uid: "",
      uiddel: [],
      pplist: [],
      remark: this.$store.state.xiugaiflag != "" ? this.$parent.remark : "",
      pp: this.$store.state.xiugaiflag != "" ? this.$parent.flmcvalue : ""
    };
  },
  components: {},
  methods: {
    //品牌名称
    tjppchange(value) {
      this.tjfpfl = value;
    },

    //选择类型
    flChange(e) {
      this.protype = e.target.value;
    },
    //------结束 上传产品图
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    flfilterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },

    //删除图片
    removelist(file) {
      this.uid = file.uid;
      if (this.uid == 0 || this.uid == 1 || this.uid == 2) {
        this.$parent.proPic.splice(this.uid, 1);
      }
      this.uiddel.push(file.uid);
    },
    subtjpp() {
      if (this.$store.state.xiugaiflag != "") {
        //修改================
        if (this.tjfpfl != "") {
          if (this.fileList.length) {
            for (var i = 0; i < this.fileList.length; i++) {
              if (this.fileList[i].url) {
                this.tjpppic.push(this.$parent.proPic[i]);
              } else {
                this.tjpppic.push(this.fileList[i].thumbUrl);
              }
            }
          }

          this.axios
            .post(
              "kucun/AddProClass.php",
              qs.stringify({
                id: this.$parent.listid,
                sqdwid: this.$store.state.bbl_sqdwid,
                proName: this.tjfpfl,
                proPic: this.tjpppic,
                proRemark: this.tjppjs,
                proClass: 2,
                language: 0,
                protype: this.protype,
                remark:this.remark
              })
            )
            .then(res => {
              if (res.data.code == 303) {
                this.tjpppic = [];
                this.reload();
                this.$store.state.tjwz = false;
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.$store.state.flnamedata = [];
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.tjpppic = [];
              }
            });
        } else {
          this.tjpppic = [];
          this.$notification["error"]({
            message: "失败",
            description: "请输入品牌名称",
            duration: 1.5
          });
        }
      } else {
        //添加================
        if (this.tjfpfl != "") {
          if (this.fileList.length) {
            for (var i = 0; i < this.fileList.length; i++) {
              this.tjpppic.push(this.fileList[i].thumbUrl);
            }
          }
          this.axios
            .post(
              "kucun/AddProClass.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                proName: this.tjfpfl,
                proPic: this.tjpppic,
                proRemark: this.tjppjs,
                proClass: 2,
                language: 0,
                protype: this.protype,
                remark:this.remark

              })
            )
            .then(res => {
              if (res.data.code == 303) {
                this.tjpppic = [];
                this.reload();
                this.$store.state.tjwz = false;
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.$store.state.flnamedata = [];
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.tjpppic = [];
              }
            });
        } else {
          this.tjpppic = [];
          this.$notification["error"]({
            message: "失败",
            description: "请输入品牌名称",
            duration: 1.5
          });
        }
      }
    },
    //品牌列表
    getpplist() {
      this.axios
        .post(
          "kucun/SelectPpList.php",
          qs.stringify({
            sccjc: this.pp,
            sqdwid: sessionStorage.getItem("sqdwid")
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.pplist = [];

            for (var i = 0; i < res.data.result.length; i++) {
              this.pplist.push(res.data.result[i].proName);
            }
          }
        });
    },
    close() {
      this.$store.state.tjwz = false;
      this.$store.state.xiugaiflag = "";
      this.$store.state.flnamedata = [];
    }
  },

  created() {
    setTimeout(() => {
      if (
        this.$parent.proPic != " " &&
        this.$parent.proPic != "" &&
        this.$parent.proPic != null
      ) {
        for (var i = 0; i < this.$parent.proPic.length; i++) {
          let ss = {
            uid: i,
            name: " ",
            status: "done",
            url:
              "https://image.bearing.cn/qy/member/imgcp/" +
              this.$store.state.bbl_sqdwid +
              "/" +
              this.$parent.proPic[i]
          };
          this.fileList.push(ss);
        }
      }
      if (this.$store.state.xiugaiflag == "") {
        this.fileList = [];
      }

      if (this.$store.state.articleName.length) {
        for (var i = 0; i < this.$store.state.articleName.length; i++) {
          this.fldatalist.push(this.$store.state.articleName[i].articleName);
        }
        console.log(this.fldatalist);
      }
    }, 1000),
      this.getpplist();
  }
};
</script>

<style lang='less' >
.tjpptk_box {
  .tjpptk {
    width: 66%;
    height: auto;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    text-align: left;
    padding: 20px;
    .head_clos {
      display: flex;
      justify-content: space-between;
      .close {
        font-size: 20px;
      }
    }
    .tjpptk_inp {
      ul {
        li {
          margin: 20px 0;
          .inp_tit {
            display: inline-block;
            width: 100px;
            text-align: right;
          }

          //上传图片
          .clearfix {
            width: 80%;
            display: inline-block;
            vertical-align: middle;
            .ant-upload.ant-upload-select-picture-card {
              border: 1px dashed #d9d9d9 !important;
              width: 104px !important;
              height: 104px !important;
            }
          }
          ant-upload.ant-upload-select-picture-card :hover {
            border-color: #40a9ff !important;
          }

          /* you can make up upload button and sample style by using stylesheets */
          .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
          }

          .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
          }
          .li {
            ul {
              li {
                margin: 0 !important;
              }
            }
          }
        }
        .foot_btn {
          width: 30%;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
}
</style>
